import React, { Component } from 'react'
import '../assets/css/login.css'
import Header from "../components/HeadAssembly"
export default class Login extends Component {
    state = {
        phone: "",
        password: ""
    }
    sign() {
        const { phone, password } = this.state
        if (phone == "") {
            return alert("手机号不能为空")
        }
        if (password == "") {
            return alert("密码不能为空")
        }
        this.$axios.post('/login', { phone, password }).then(res => {
            console.log(res);
            if (res.code == 200 && res.msg == "登录成功") {
                this.setState(
                    {
                        phone: "",
                        password: ""
                    }
                )

                localStorage.setItem("logindata",JSON.stringify(res.list))
                
                this.props.history.push("/unceter")
                this.props.restCarList()
            }
        })
    }
    render() {
        const { phone, password } = this.state
        return (
            <>
                <div className="login-container">
                    <Header title="会员登录" right_text="注册" right_method={()=>this.props.history.push("/reg")}/>
                    <div className="logo"></div>
                    <div className="form">

                        <div className="form-group">
                            <input value={phone} onChange={(e) => this.setState({ phone: e.target.value.trim() })} type="text" placeholder="手机号" />
                        </div>
                        <div className="form-group">
                            <input value={password} onChange={(e) => this.setState({ password: e.target.value.trim() })} type="password" placeholder="密码" />
                        </div>
                        <div className="form-group">
                            <button className="btn-gray" onClick={() => this.sign()}>登录</button>
                        </div>
                    </div>
                </div>
                <ul className="tabbar">
                    <li className="icon icon-home">
                        商城
                    </li>
                    <li className="icon icon-cate">
                        分类
                    </li>
                    <li className="icon icon-cart">
                        <span className="badge">5</span>
                        购物车
                    </li>
                    <li className="icon icon-user">
                        我的
                    </li>
                </ul>
            </>
        )
    }
}
